<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#myCan {
				display: block;
				margin: 100px auto;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<canvas id="myCan" width="600px" height="600px"></canvas>
		<button type="button" class="btn">擦</button>
		<script type="text/javascript">
			var btn = document.querySelector('.btn');
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			oC.onmousedown = function(e) {
				//按下这点为起点
				ctx.beginPath();
				ctx.moveTo(e.offsetX, e.offsetY);
				document.onmousemove = function(e) {
					ctx.lineTo(e.clientX-oC.offsetLeft,e.clientY-oC.offsetTop);
					ctx.stroke();
				}
				document.onmouseup=function(){
					document.onmousemove =document.onmouseup=null;
				}
				return false;
			}
			btn.onclick=function(){
				ctx.clearRect(0,0,600,600);
			}



			// oC.onmousedown = function(e) {
			// 	var ev = e || event;
			// 	var evX = ev.clientX;
			// 	var evY = ev.clientY;
			// 	ctx.moveTo(evX,evY);
			// 	document.onmousemove=function(e){
			// 		var ev = e || event;
			// 		var x = ev.clientX;
			// 		var y = ev.clientY;
			// 		ctx.lineTo(x,y);
			// 		ctx.stroke();
			// 	}
			// 	document.onmouseup=function(){
			// 		document.onmousemove=document.onmouseup=null;
			// 	}
			// }
		</script>
	</body>
</html>
